<template>
    <div
        class="cardRemake"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="查询服务类-->联名卡补卡/换卡">
            <template slot="cardBody">
                <el-form
                    class="cardForm"
                    ref="cardForm"
                    :model="formData"
                    :rules="rules"
                    label-position="right"
                    size="small"
                    label-width="160px"
                >
                    <el-form-item label="卡号:" label-position="left">
                        <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="账户类型:" label-position="left">
                        <el-input v-model="accountType" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="凸字姓名:" label-position="left">
                        <el-input v-model="cardInfo_3004.EMBNAME" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="递卡方式:" label-position="left" prop="DspchCd">
                        <el-select placeholder="请选择递卡方式" v-model="formData.DspchCd" clearable>
                            <el-option
                                v-for="(item, index) in DspchCdList"
                                :key="index"
                                :label="item.label"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="卡片递送地址类型:" label-position="left" prop="CardTo">
                        <el-select placeholder="请选择地址类型" v-model="formData.CardTo" clearable>
                            <el-option
                                v-for="(item, index) in CardToList"
                                :key="index"
                                :label="item.label"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="递送费用:" label-position="left" prop="CourFee">
                        <el-select placeholder="请选择递送费用" v-model="formData.CourFee" clearable>
                            <el-option
                                v-for="(item, index) in CourFeeList"
                                :key="index"
                                :label="item.label"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="补卡费用:" label-position="left" prop="RepFee">
                        <el-select placeholder="请选择补卡费用" v-model="formData.RepFee" clearable>
                            <el-option
                                v-for="(item, index) in RepFeeList"
                                :key="index"
                                :label="item.label"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="补卡原因:" label-position="left" prop="IssRsn">
                        <el-select placeholder="请选择补卡原因" v-model="formData.IssRsn" clearable>
                            <el-option
                                v-for="(item, index) in IssRsnList"
                                :key="index"
                                :label="item.label"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="btnBox">
                        <el-button type="primary" size="small" @click="handleConfirm">补 / 换卡</el-button>
                        <el-button type="primary" size="small" @click="handleReset">重 置</el-button>
                    </div>
                </el-form>

                <!-- 补卡确认对话框 -->
                <el-dialog
                    v-drag
                    title="补/换卡申请信息确认"
                    width="500px"
                    :visible="isShowDialog"
                    @close="handleCloseDialog"
                    append-to-body
                    custom-class="confirmDialog"
                    :close-on-click-modal="false"
                >
                    <el-row class="message">
                        <el-col :span="6" class="title">卡号：</el-col>
                        <el-col :span="18">{{ cardInfo_3004.CARDNO }}</el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="6" class="title">卡产品：</el-col>
                        <el-col :span="18">{{ productName }}</el-col>
                    </el-row>
                    <el-row class="confirmBtnBox">
                        <el-button
                            size="small"
                            icon="el-icon-circle-close"
                            @click="handleCloseDialog"
                        >取 消</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleRemake"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </el-row>
                </el-dialog>

                <!-- 补卡成功结果展示 -->
                <el-dialog
                    v-drag
                    title="联名卡补卡/换卡成功！"
                    width="500px"
                    :visible="isShowSuccessDialog"
                    @close="handleCloseDialog"
                    append-to-body
                    custom-class="confirmDialog"
                    :close-on-click-modal="false"
                >
                    <el-row class="message">
                        <el-col :span="6" class="title">新卡号：</el-col>
                        <el-col :span="18">{{ successData.CardnbrNew }}</el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="6" class="title">旧卡号：</el-col>
                        <el-col :span="18">{{ successData.Cardnbr }}</el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="6" class="title">卡产品：</el-col>
                        <el-col :span="18">{{ productName }}</el-col>
                    </el-row>
                    <el-row class="confirmBtnBox">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleCloseDialog"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </el-row>
                </el-dialog>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getDictValue, getAccountTypeName } from '@/utils/Common';
import { cardProductCheck } from '@/utils/menuRules';

export default {
    name: 'cardRemake',
    components: {
        cardComponent,
    },
    data() {
        return {
            accountType: '', // 账户类别
            productName: '', // 卡产品名称
            DspchCdList: [], // 递卡方式下拉选择列表
            CardToList: [], // 卡片递送地址类型下拉选择列表
            CourFeeList: [], // 递送费用下拉选择列表
            RepFeeList: [], // 补卡费用下拉选择列表
            IssRsnList: [], // 补卡原因下拉选择列表
            successData: { // 补卡成功展示字段
                CardnbrNew: '', // 新卡卡号
                Cardnbr: '', // 旧卡号
            },
            formData: { // 表单数据
                DspchCd: undefined, // 递卡方式
                CardTo: undefined, // 卡片递送地址类型
                CourFee: undefined, // 递送费用
                RepFee: undefined, // 补卡费用
                IssRsn: undefined, // 补卡原因
            },
            isShowSuccessDialog: false, // 补卡成功结果展示对话框 显示控制阀
            isShowDialog: false, // 对话框 显示/隐藏 控制
            pageLoading: false, // 页面loading
            rules: { // 表单校验规则
                DspchCd: [{ required: true, message: '请选择递卡方式', trigger: 'change' }],
                CardTo: [{ required: true, message: '请选择卡片递送地址类型', trigger: 'change' }],
                CourFee: [{ required: true, message: '请选择递送费用', trigger: 'change' }],
                RepFee: [{ required: true, message: '请选择补卡费用', trigger: 'change' }],
                IssRsn: [{ required: true, message: '请选择补卡原因', trigger: 'change' }],
            },
        };
    },

    // 获取下拉选择基础数据
    created() {
        // 获取 递卡方式 列表
        this.getBaseData({ dictValue: 'DSPCHCD' }, 'DspchCdList');

        // 获取 卡片递送地址类型 列表
        this.getBaseData({ dictValue: '账单地址类型' }, 'CardToList');

        // 获取 递送费用 列表
        this.getBaseData({ dictValue: 'COURFEE' }, 'CourFeeList');

        // 获取 补卡费用 列表
        this.getBaseData({ dictValue: 'REPFEE' }, 'RepFeeList');

        // 获取 补卡原因 列表
        this.getBaseData({ dictValue: 'ISSRSN' }, 'IssRsnList');
    },

    mounted() {
        this.init();
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 卡列表数据
        inlineParams: state => state.common.inlineParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    methods: {

        // 初始化
        async init() {
            // 查询数据库字典 获取 卡产品名称
            this.productName = await getDictValue(this.cardList_3601, this.cardInfo_3004.CARDNO, 'PRODUCT', this);

            // 菜单校验
            const checkFlag = await cardProductCheck(this.productName, this.cardInfo_3004, this, '联名卡补卡');

            if (checkFlag) {
                // 获取账户类型
                this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this) || this.cardInfo_3004.CATEGORY;
            }
        },

        // 获取账户类别
        // handleGetAccountType() {
        //     let params = {}
        //     this.cardList_3601.forEach( item => {
        //         if (item.CARDNBR === this.cardInfo_3004.CARDNO) {
        //             let CATE = item.CATEGORY + ''
        //             params = {
        //                 detailCode: CATE.substr(0, 1),
        //                 dictValue: 'CATE'
        //             }
        //             return
        //         }
        //     })
        //     this.$post.Dict.dataBaseDict(params).then( res => {
        //         if (res.status === 200) {
        //             this.accountType = res.data.content
        //         } else {
        //             that.$message.error(res.data.msg);
        //         }
        //     })
        // },

        // 获取基础数据列表
        getBaseData(params, target) {
            this.$post.common.getBaseDataList(params).then((res) => {
                // console.log(res, 'res-数据字典查询结果')
                this[target] = res.data.content;
            });
        },

        // 确认提交 打开信息确认弹框
        handleConfirm() {
            this.$refs.cardForm.validate((valid) => {
                if (valid) {
                    this.isShowDialog = true;
                } else {
                    this.$message.warning('请填写补/换卡信息!');
                }
            });
        },

        // 点击 提交补/换卡申请 跑 M010 交易
        handleRemake() {
            this.isShowDialog = false;
            this.pageLoading = true;
            // 设置请求参数 -- M010 交易
            const appBody = {
                Source: 'AG', // 交易来源
                Cardnbr: this.cardInfo_3004.CARDNO, // 卡号
                IssRsn: this.formData.IssRsn, // 换卡原因
                // EmbName: '', // 凸字姓名
                // ExpDate: '', // 到期日
                DspchCd: this.formData.DspchCd, // 递卡方式
                DspchLcn: '', // 领卡分支行
                RepFee: this.formData.RepFee, // 换卡费用代码
                CourFee: this.formData.CourFee, // 递送费用代码
                Cdfrm: '', // 卡片版面
                Checkflg: '', // 检查项目选择
                // Idtype: '', // 证件种类
                // Idno: '', // 证件号码
                Pinreqd: '', // 是否产生PIN
                KeepYn: '', // 换卡保留卡号选项
                CardTo: this.formData.CardTo, // 卡片递送地址类型
                CdissFlag: '', // 即时制卡
                // Retain: '' // 保留字段
            };
            const params = JSON.parse(JSON.stringify(this.inlineParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = 'M010';
            params.body.appBody = appBody;

            console.log(params, 'params -- 请求参数');
            // 跑 M010 交易
            this.$post.inlineTransModule.transH007(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result--M010');
                    if (result.sysHead.rspCd === '000000') {
                        for (const key in this.successData) {
                            this.successData[key] = result.body.appBody[key];
                        }
                        this.isShowSuccessDialog = true;
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },

        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.cardForm.resetFields();
        },

        // 点击关闭 对话框
        handleCloseDialog() {
            this.isShowDialog = false;
            this.isShowSuccessDialog = false;
        },
    },
};
</script>
<style lang="scss">
.cardRemake {
    .cardForm {
        width: 50%;
        margin: 0 auto;
        .el-form-item__content {
            text-align: left;

            .el-select,
            .el-date-editor {
                width: 100%;
                max-width: 400px;
            }
        }
    }
}
// 对话框样式
.confirmDialog {
    .el-dialog__header {
        text-align: center;
        .el-dialog__title {
            font-size: 22px;
            font-weight: 500;
        }
    }
}
</style>
<style lang="scss" scoped>
.cardRemake {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .el-input,
    .el-textarea {
        max-width: 400px;
    }
    .btnBox {
        margin-top: 50px;
        text-align: center;
    }
}
.confirmDialog {
    .message {
        margin-bottom: 30px;
        font-size: 16px;

        .title {
            text-align: right;
            color: #000;
            font-weight: 600;
        }
    }

    .confirmBtnBox {
        padding: 10px;
        text-align: center;
    }
}
</style>
